{% extends "_layouts/examples.html" %}
{% block title %}Buttons / Icon{% endblock %}

{% block standalone_css %}patterns_buttons{% endblock %}

{% block content %}
<p>
  <button class="p-button--positive has-icon"><i class="p-icon--success"></i></button>
  <button class="p-button has-icon"><i class="p-icon--plus"></i><span>Icon before text</span></button>
  <button class="p-button has-icon"><span>Icon after text</span><i class="p-icon--chevron-down"></i></button>
</p>
<p>
  <button class="p-button--positive is-dense has-icon"><i class="p-icon--success"></i></button>
  <button class="p-button is-dense has-icon"><i class="p-icon--plus"></i><span>Icon before text</span></button>
  <button class="p-button is-dense has-icon"><span>Icon after text</span><i class="p-icon--chevron-down"></i></button>
</p>
<p>
  <button class="p-button--positive is-small has-icon"><i class="p-icon--success"></i></button>
  <button class="p-button is-small has-icon"><i class="p-icon--plus"></i><span>Icon before text</span></button>
  <button class="p-button is-small has-icon"><span>Icon after text</span><i class="p-icon--chevron-down"></i></button>
</p>
{% endblock %}
